
<link href='{{ asset("fullcalendar-4.2.0/packages/core/main.css") }}' rel='stylesheet' />
<link href='{{ asset("fullcalendar-4.2.0/packages/daygrid/main.css") }}' rel='stylesheet' />
<script src='{{ asset("fullcalendar-4.2.0/packages/core/main.js") }}'></script>
<script src='{{ asset("fullcalendar-4.2.0/packages/interaction/main.js") }}'></script>
<script src='{{ asset("fullcalendar-4.2.0/packages/daygrid/main.js") }}'></script>
<script src='{{ asset("fullcalendar-4.2.0/packages/core/locales/zh-cn.js") }}'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
			locale: "zh-cn",
			header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
      },
      defaultDate: "{{ date('Y-m-d', time()) }}",
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: function(dateInfo, callback, unknown) {

			var month;
			if (dateInfo.start.getDate() === 1){
				month = dateInfo.start.getMonth() + 1<10? "0"+(dateInfo.start.getMonth() + 1):dateInfo.start.getMonth() + 1;
			}else{
				month = dateInfo.start.getMonth() + 2<10? "0"+(dateInfo.start.getMonth() + 2):dateInfo.start.getMonth() + 2;
			}
			var theDate = dateInfo.start.getFullYear() + '-' + month;
			
			var url = "{!! $url !!}&date="+theDate;
			$.get(url, function(result){
			    callback(result);
			});
		}
    });

    calendar.render();
  });

</script>
<style>

  #calendar {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .fc-day{
  	background-color: #FFFFFF;
  }

</style>

<div id='calendar'></div>


